<template>
  <div class="user-wrapper">
    <div class="content-box">
      <!-- <span
        class="action"
        @click="goto('/config/manage/log')"
        v-if="toolKeys.includes('/config/manage/log')"
      >
        <a-tooltip>
          <template slot="title"> 操作日志 </template>
          <a-icon type="copy" />
        </a-tooltip>
      </span>
      <span
        class="action"
        @click="goto('/config/manage/message')"
        v-if="toolKeys.includes('/config/manage/message')"
      >
        <a-tooltip>
          <template slot="title"> 消息通知 </template>
          <a-badge :count="messageNum">
            <a-icon type="bell"></a-icon>
          </a-badge>
        </a-tooltip>
      </span>
      <span
        class="action"
        @click="goto('/config/manage/download')"
        v-if="toolKeys.includes('/config/manage/download')"
      >
        <a-tooltip>
          <template slot="title"> 下载中心 </template>
          <a-badge :count="downloadNum">
            <a-icon type="cloud-download"></a-icon>
          </a-badge>
        </a-tooltip>
      </span> -->
      <span
        class="action ant-dropdown-link user-dropdown-menu"
        @click="getUserInfo"
        style="margin-top: -4px"
      >
        <a-avatar
          class="avatar"
          size="small"
          :src="userInfo.avatar || require('../../assets/avatar-icon.png')"
        />
        <span>{{ userInfo.name }}</span>
      </span>
      <span class="action ant-dropdown-link user-dropdown-menu" @click="handleLogout">
        <a-icon type="logout" />
      </span>
    </div>
    <!-- 默认分润比例设置 -->
    <userForm ref="userForm" />
    <a-modal v-model="visible" :footer="null" :closable="false" width="fit-content">
      <!-- <template slot="title">
        <span class="ant-card-head-title">分销二维码</span>
        <div class="ant-card-extra">
          <a type="default">复制邀请码</a>
        </div>
      </template>
      <img :src="qrUrl" class="qrUrl" /> -->
      <a-card hoverable style="width: 320px">
        <img
          slot="cover"
          alt="example"
          :src="qrUrl"
        />
        <a-card-meta>
          <a type="default" slot="title" @click="copyHandler"><a-icon type="copy" :style="{ fontSize: '12px' }" />分销二维码</a>
          <template slot="description"> {{ inviteUrl }} </template>
        </a-card-meta>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import NoticeIcon from '@/components/NoticeIcon'
import userForm from './modal/userForm.vue'
import { mapActions, mapGetters } from 'vuex'
import { getMessageNum } from '@/api/set'
import { editUser, getDownloadCount } from '@/api/system'
import { shortUserQr } from '@/api/short'
import storage from 'store'
import UploadImage from '../../components/UploadImage'
import store from '../../store'

export default {
  name: 'UserMenu',
  components: {
    UploadImage,
    NoticeIcon,
    userForm
  },
  data: function () {
    return {
      messageNum: 0,
      timer: null,
      userVisible: false,
      userForm: {},
      labelCol: { span: 5 },
      wrapperCol: { span: 13 },
      rules: {
        avatar: [{ required: true, message: '请上传头像' }],
        jobNumber: [{ required: true, message: '请输入统一认证号' }],
        name: [{ required: true, message: '请输入员工姓名' }],
        position: [{ required: true, message: '请输入员工职位' }],
        email: [{ required: true, message: '请输入邮箱地址' }]
      },
      downloadNum: 0,
      toolKeys: [''],
      visible: false,
      qrUrl: '',
      inviteUrl: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'addRouters'])
  },
  mounted() {
    // const routers = this.addRouters[0].children
    // let tools = []
    // routers.some((v) => {
    //   if (v.path == '/config') {
    //     tools = v.children && v.children[0].children
    //     return true
    //   }
    // })
    // this.toolKeys = tools.map((v) => v.path)
    // console.log(tools, 'keys')
    // clearInterval(this.timer)
    // this.getMessageNum()
    // this.timer = setInterval(this.getMessageNum, 60 * 1000)
  },
  methods: {
    ...mapActions(['Logout']),
    qrHandler() {
      shortUserQr().then((resp) => {
        this.qrUrl = resp.data.url
        this.inviteUrl = resp.data.inviteUrl
        this.visible = true
      })
    },
    copyHandler() {
      var Url2 = `${this.inviteUrl}`
      var oInput = document.createElement('textarea')
      oInput.value = Url2
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      this.$notification['success']({
        message: '成功提示',
        description: '复制成功'
      })
    },
    handleLogout() {
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk: () => {
          return this.Logout({})
            .then(() => {
              setTimeout(() => {
                window.location.reload()
              }, 16)
            })
            .catch((err) => {
              this.$message.error({
                title: '错误',
                description: err.message
              })
            })
        },
        onCancel() {}
      })
    },
    goto(path) {
      this.$router.replace({
        path: path
      })
    },
    getMessageNum() {
      const data = {
        userId: storage.get('user_id'),
        viewState: 0
      }
      getMessageNum(data).then((res) => {
        this.messageNum = res.data
      })
      // getDownloadCount().then((res) => {
      //   this.downloadNum = res.data
      // })
    },
    onClose() {
      this.userVisible = false
    },
    afterVisibleChange() {},
    getUserInfo() {
      if (this.userInfo.userType == 'salesman') {
        this.qrHandler()
      }
      // this.userForm = { ...this.userInfo }
      // this.userVisible = true
      // this.$refs.userForm.open()
    },
    userSubmit() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          editUser(this.userForm).then((res) => {
            console.log(res)
            this.$notification['success']({
              message: '提示',
              description: `${this.userForm.id ? '编辑' : '新增'}成功`
            })
            this.onClose()
            store.dispatch('GetInfo')
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.content-box {
  display: flex;
}
/deep/.anticon {
  svg {
    font-size: 20px;
  }
}
.qrUrl {
  width: 100%;
  height: 100%;
}
/deep/.ant-card-meta-title a .anticon svg {
  font-size: 12px;
}
</style>
